<template>
  <div class="rose-chart-container" ref="chartContainer"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "RoseChart",
  props: {
    chartData: {
      type: Array,
      default: () => [
        { value: 25, name: "北京" },
        { value: 20, name: "上海" },
        { value: 18, name: "广州" },
        { value: 15, name: "深圳" },
        { value: 13, name: "未知" },
        { value: 9, name: "海外" },
      ],
    },
  },
  data() {
    return {
      chartInstance: null,
      // 渐变色配置
      colorList: [
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            { offset: 0, color: "rgba(51,192,205,0.01)" },
            { offset: 1, color: "rgba(51,192,205,0.57)" },
          ],
        },
        {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "rgba(115,172,255,0.02)" },
            { offset: 1, color: "rgba(115,172,255,0.67)" },
          ],
        },
        {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [
            { offset: 0, color: "rgba(158,135,255,0.02)" },
            { offset: 1, color: "rgba(158,135,255,0.57)" },
          ],
        },
        {
          type: "linear",
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            { offset: 0, color: "rgba(252,75,75,0.01)" },
            { offset: 1, color: "rgba(252,75,75,0.57)" },
          ],
        },
        {
          type: "linear",
          x: 1,
          y: 1,
          x2: 1,
          y2: 0,
          colorStops: [
            { offset: 0, color: "rgba(253,138,106,0.01)" },
            { offset: 1, color: "#FDB36ac2" },
          ],
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            { offset: 0, color: "rgba(254,206,67,0.12)" },
            { offset: 1, color: "#FECE4391" },
          ],
        },
      ],
      colorLine: ["#33C0CD", "#73ACFF", "#9E87FF", "#FE6969", "#FDB36A", "#FECE43"],
    };
  },
  methods: {
    // 获取富文本配置
    getRich() {
      let result = {};
      this.colorLine.forEach((v, i) => {
        result[`hr${i}`] = {
          backgroundColor: this.colorLine[i],
          borderRadius: 3,
          width: 3,
          height: 3,
          padding: [3, 3, 0, -12],
        };
        result[`a${i}`] = {
          padding: [-11, 6, -20, 6],
          color: this.colorLine[i],
          backgroundColor: "transparent",
          fontSize: 12,
        };
      });
      return result;
    },
    // 初始化图表
    initChart() {
      const container = this.$refs.chartContainer;
      this.chartInstance = echarts.init(container);
      
      // 处理数据
      const data = [...this.chartData].sort((a, b) => b.value - a.value);
      data.forEach((v, i) => {
        v.labelLine = {
          lineStyle: {
            width: 1,
            color: this.colorLine[i],
          },
        };
      });

      const option = {
        series: [{
          type: "pie",
          radius: "60%",
          center: ["50%", "50%"],
          clockwise: true,
          avoidLabelOverlap: true,
          label: {
            show: true,
            position: "outside",
            formatter: (params) => {
              const name = params.name;
              const percent = params.percent + "%";
              const index = params.dataIndex;
              return [`{a${index}|${name}：${percent}}`, `{hr${index}|}`].join("\n");
            },
            rich: this.getRich(),
          },
        //   itemStyle: {
        //     color: (params) => this.colorList[params.dataIndex],
        //   },
          data,
          roseType: "radius",
        }],
      };

      this.chartInstance.setOption(option);
    },
    // 更新图表
    updateChart() {
      this.initChart();
    },
    // 处理窗口大小变化
    handleResize() {
      this.chartInstance?.resize();
    },
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
      this.chartInstance = null;
    }
    window.removeEventListener("resize", this.handleResize);
  },
  watch: {
    chartData: {
      deep: true,
      handler() {
        this.updateChart();
      },
    },
  },
};
</script>

<style scoped>
.rose-chart-container {
  width: 100%;
  height: 500px;
  min-width: 300px;
}
</style>
